<template>
    <yin-login-logo></yin-login-logo>
    <div class="sign">
        <div class="sign-head">
            <span>欢迎登录</span>
        </div>
        <el-tabs v-model="activeName" type="border-card" tab-position="top">
            <el-tab-pane label="验证码登录" name="first">
                <el-form ref="signInFormByPhoneCode" status-icon :model="phoneCodeForm" :rules="SignInByCodeRules">
                    <el-form-item prop="phoneNum">
                        <el-input placeholder="手机号码" v-model="phoneCodeForm.phoneNum"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkCode">
                        <el-col :span="11" :offset="0">
                            <el-input type="text" placeholder="请输入验证码" v-model="phoneCodeForm.checkCode"></el-input>
                        </el-col>
                        <el-col :span="2" :offset="0"></el-col>
                        <el-col :span="11">
                            <el-button style="width:100%" type="primary" @click="handleSendCode" :disabled="issend">
                                {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
                            </el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item class="sign-code-btn">
                        <el-button type="primary" @click="handleLoginInByCode">登录/注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="账号密码登录" name="second">
                <el-form ref="signInForm" status-icon :model="registerForm" :rules="SignInRules">
                    <el-form-item prop="username">
                        <el-input placeholder="用户名" v-model="registerForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密码" v-model="registerForm.password"
                            @keyup.enter="handleLoginIn"></el-input>
                    </el-form-item>
                    <el-form-item class="sign-btn">
                        <el-button @click="handleSignUp">注册</el-button>
                        <el-button type="primary" @click="handleLoginIn">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="邮箱登录" name="third">
                <el-form ref="signInFormByEmailCode" status-icon :model="emailCodeForm" :rules="SignInByCodeRules">
                    <el-form-item prop="emailNum">
                        <el-input placeholder="邮箱号码" v-model="emailCodeForm.emailNum"></el-input>
                    </el-form-item>
                    <el-form-item prop="checkCode">
                        <el-col :span="11" :offset="0">
                            <el-input type="text" placeholder="请输入验证码" v-model="emailCodeForm.checkCode"></el-input>
                        </el-col>
                        <el-col :span="2" :offset="0"></el-col>
                        <el-col :span="11">
                            <el-button style="width:100%" type="primary" @click="handleSendEmail" :disabled="issend">
                                {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
                            </el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item class="sign-code-btn">
                        <el-button type="primary" @click="handleLoginInByEmail">登录/注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <el-row :gutter="20" class="otherway">
            <el-col :span="8" :offset="0">
                <el-button type="primary" size="default" class="btn">其它方式：</el-button>
            </el-col>
            <el-col :span="5" :offset="0">
                <!-- 微信登录按钮 -->
                <el-button type="primary" size="default" class="btn">
                    <!-- 微信图标 SVG -->
                    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" class="ZDI ZDI--Wechat24">
                        <!-- 绘制微信图标的路径 -->
                        <path fill="#07C160"
                            d="M20.314 18.59c1.333-.968 2.186-2.397 2.186-3.986 0-2.91-2.833-5.27-6.325-5.27-3.494 0-6.325 2.36-6.325 5.27 0 2.911 2.831 5.271 6.325 5.271.698.001 1.393-.096 2.064-.288l.186-.029c.122 0 .232.038.336.097l1.386.8.12.04a.21.21 0 0 0 .212-.211l-.034-.154-.285-1.063-.023-.135a.42.42 0 0 1 .177-.343ZM9.09 3.513C4.9 3.514 1.5 6.346 1.5 9.84c0 1.905 1.022 3.622 2.622 4.781a.505.505 0 0 1 .213.412l-.026.16-.343 1.276-.04.185c0 .14.113.254.252.254l.146-.047 1.663-.96a.793.793 0 0 1 .403-.116l.222.032c.806.231 1.64.348 2.478.348l.417-.01a4.888 4.888 0 0 1-.255-1.55c0-3.186 3.1-5.77 6.923-5.77l.411.011c-.57-3.02-3.71-5.332-7.494-5.332Zm4.976 10.248a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001Zm4.217 0a.843.843 0 1 1 0-1.685.843.843 0 0 1 0 1.684v.001ZM6.561 8.827a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Zm5.061 0a1.012 1.012 0 1 1 0-2.023 1.012 1.012 0 0 1 0 2.023Z"
                            clip-rule="evenodd"></path>
                    </svg>
                </el-button>
            </el-col>
            <el-col :span="5" :offset="0">
                <!-- 阿里登录按钮 -->
                <el-button type="primary" size="default" class="btn">
                    <!-- 阿里图标 -->
                    <img :src="aliLogo" fit="fill" :lazy="true" width="24" height="24" />

                </el-button>
            </el-col>
            <el-col :span="5" :offset="0">
                <!-- 未知第三方登录按钮 -->
                <el-button type="primary" size="default" class="btn">
                    <!-- 未知第三方登录图标 SVG -->
                    <svg t="1687607198083" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="1614" width="24" height="24">
                        <!-- 绘制未知第三方登录图标的路径1 -->
                        <path
                            d="M867.1232 25.6h-91.1872a29.184 29.184 0 0 0-21.504 9.5232 33.28 33.28 0 0 0-8.9088 22.9376c0 8.2944 2.9696 16.5376 8.9088 22.8864a29.184 29.184 0 0 0 21.504 9.5232h91.1872v97.28a33.28 33.28 0 0 0 8.9088 22.9376 29.184 29.184 0 0 0 43.008 0 33.28 33.28 0 0 0 8.8576-22.9376v-97.28c0-35.84-27.2384-64.8704-60.7744-64.8704z m30.3616 486.4a30.1568 30.1568 0 0 0-30.3616 30.3616v91.1872h-91.1872a30.1568 30.1568 0 0 0-21.504 8.96c-1.6384 1.5872-2.5088 3.6864-3.6864 5.632-34.304-33.024-72.8576-60.16-115.5072-78.1824 86.6304-51.7632 141.4656-151.296 124.6208-263.168-15.872-104.96-97.28-192.6656-201.1648-214.3744a273.408 273.408 0 0 0-56.32-5.888 260.4544 260.4544 0 0 0-260.5568 260.5568c0 95.0784 51.5584 177.5104 127.6416 222.976-42.5472 18.0224-81.2032 45.1584-115.5072 78.1824-1.1264-1.9456-2.048-4.0448-3.6864-5.632a30.1568 30.1568 0 0 0-21.504-8.9088h-91.136v-91.2384a30.1568 30.1568 0 0 0-8.96-21.504 30.1568 30.1568 0 0 0-21.504-8.9088 30.1568 30.1568 0 0 0-30.3616 30.464v91.136c0 33.536 27.2896 60.8256 60.8256 60.8256H212.48a488.1408 488.1408 0 0 0-97.1264 240.2304 57.344 57.344 0 0 0 56.9856 63.744h660.0192a57.344 57.344 0 0 0 56.9856-63.744 487.7312 487.7312 0 0 0-97.1264-240.3328h74.8544c33.5872 0 60.8256-27.2896 60.8256-60.8256v-91.2384A30.1568 30.1568 0 0 0 897.536 512V512zM107.264 220.16a29.184 29.184 0 0 0 21.504-9.472 33.28 33.28 0 0 0 8.8576-22.9376v-97.28H228.864a29.184 29.184 0 0 0 21.504-9.5232 33.28 33.28 0 0 0 8.8576-22.8864 33.28 33.28 0 0 0-8.9088-22.9376 29.184 29.184 0 0 0-21.504-9.5232H137.6256C103.9872 25.6 76.8 54.6304 76.8 90.4704v97.28c0 8.3456 2.9184 16.4864 8.9088 22.9376a29.184 29.184 0 0 0 21.504 9.472h0.0512z"
                            fill="#F9A14D" p-id="1615"></path>
                        <!-- 绘制未知第三方登录图标的路径2 -->
                        <path d="M51.2 281.6h921.6V358.4H51.2z" fill="#F9A14D" p-id="1616"></path>
                    </svg>
                </el-button>
            </el-col>
        </el-row>

    </div>
</template>
  
<script setup lang="ts">
import { reactive, ref } from "vue";
import mixin from "@/mixins/mixin";
import YinLoginLogo from "@/components/layouts/YinLoginLogo.vue";
import { HttpManager } from "@/api";
import { NavName, RouterName, SignInRules, SignInByCodeRules } from "@/enums";
import { ElMessage } from 'element-plus'
import { useStore } from "vuex";

const { routerManager, changeIndex } = mixin();
const activeName = ref('first')
const countdown = ref(0)
const timer = ref(null)
const issend = ref(false)
const store = useStore();

// 定义阿里图标图片的 URL
const aliLogo = new URL('../assets/images/aliLogo.png', import.meta.url).href;

// 登录用户名密码
const registerForm = reactive({
    username: "",
    password: "",
});
// 登录短信验证码
const phoneCodeForm = reactive({
    phoneNum: "",
    checkCode: "",
});

const signInForm = ref(null);

// 登录处理
async function handleLoginIn() {
    const valid = signInForm.value.validate(); // 表单验证
    if (!valid) return;

    try {
        const username = registerForm.username;
        const password = registerForm.password;
        const result = (await HttpManager.signIn({ username, password })) as ResponseBody;
        ElMessage({
            message: result.message,
            type: result.type as any
        });
        if (result.success) {
            store.commit("setUserId", result.data.obj[0].id);
            store.commit("setUsername", result.data.obj[0].username);
            store.commit("setUserPic", result.data.obj[0].avator);
            store.commit("setToken", true);
            changeIndex(NavName.Home);
            routerManager(RouterName.Home, { path: RouterName.Home });
            const token = result.data.authorization;
            localStorage.setItem("token", token);
        }

    } catch (error) {
        console.error(error);
    }
}

// 处理注册操作，跳转到注册页面
function handleSignUp() {
    routerManager(RouterName.SignUp, { path: RouterName.SignUp });
}

// 发送短信验证码
async function handleSendCode() {
}
// 定义表单引用，用于表单验证
const signInFormByPhoneCode = ref(null)

// 短信验证码登录处理
async function handleLoginInByCode() {
}

// 定义登录邮箱验证码相关的表单数据
const emailCodeForm = reactive({
    emailNum: "",
    checkCode: "",
});

// 发送邮箱验证码
async function handleSendEmail() {
}
// 定义表单引用，用于表单验证
const signInFormByEmailCode = ref(null);

// 邮箱验证码登录处理
async function handleLoginInByEmail() {
}
</script>
  
<style lang="scss" scoped>// 使用Sass 3.0新模块系统导入
@use "@/assets/css/sign.scss";</style>